<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>

    <title>{:C('WEB_TITLE')}</title>

    <!--内容样式-->
    <link rel="stylesheet" href="__STATIC__/index/css/style.css"/>
</head>

<body>


<div class="main">
    <div class="top-box">
        <a href="index.html" class="tb-logo">
            <img src="__STATIC__/index/images/icon_logo.png"/>
        </a>
        <div class="divclear"></div>
    </div>

    <div class="login-box">
        <!--登录-->
        <div class="lb-dl" id="login">
            <div class="lbd-title">
                <img src="__STATIC__/index/images/img_login1.png"/>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login1.png"/>
                </div>
                <input type="text" placeholder="请输入手机号" class="lbdb-input mobile">
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login3.png"/>
                </div>
                <input type="password" placeholder="请输入登录密码" class="lbdb-input password">
                <div class="divclear"></div>
            </div>
            <button class="lbd-btn" id="login_submit">登录</button>
            <div class="lbd-zc" onclick="formCtr(2)">免费注册</div>
            <div class="lbd-wj" onclick="formCtr(3)">忘记密码</div>
            <div class="divclear"></div>
        </div>

        <!--注册-->
        <div class="lb-dl" id="register" style="height: 600px; display: none">
            <div class="lbd-title">
                <img src="__STATIC__/index/images/img_login2.png"/>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login1.png"/>
                </div>
                <input type="text" placeholder="请输入手机号" class="lbdb-input mobile">
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login2.png"/>
                </div>
                <input type="text" placeholder="请输入图形验证码" class="lbdb-input captcha" style="width: calc(100% - 190px);">
                <div class="lbdb-tx">
                    <img src="{:captcha_src()}" class="captcha_img" onclick="refreshCaptcha('register')">
                </div>
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login2.png"/>
                </div>
                <input type="text" placeholder="请输入短信验证码" class="lbdb-input code" style="width: calc(100% - 190px);">
                <div class="lbdb-yzm code-btn" onclick="getCode('register', 'mobile', 'captcha', 'code-btn')">获取验证码</div>
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login3.png"/>
                </div>
                <input type="password" placeholder="请输入密码" class="lbdb-input password">
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login3.png"/>
                </div>
                <input type="password" placeholder="请重复输入密码" class="lbdb-input again_password">
                <div class="divclear"></div>
            </div>
            <button class="lbd-btn" id="register_submit">立即注册</button>
            <div class="lbd-zc" onclick="formCtr(1)">已有账号，去登录 ></div>
            <div class="divclear"></div>
        </div>

        <!--重置密码-->
        <div class="lb-dl" id="resetPwd" style="height: 600px; display: none;">
            <div class="lbd-title">
                <img src="__STATIC__/index/images/img_login3.png"/>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login1.png"/>
                </div>
                <input type="text" placeholder="请输入手机号" class="lbdb-input mobile">
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login2.png"/>
                </div>
                <input type="text" placeholder="请输入图形验证码" class="lbdb-input captcha" style="width: calc(100% - 190px);">
                <div class="lbdb-tx">
                    <img src="{:captcha_src()}" class="captcha_img" onclick="refreshCaptcha('resetPwd')">
                </div>
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login2.png"/>
                </div>
                <input type="text" placeholder="请输入短信验证码" class="lbdb-input code" style="width: calc(100% - 190px);">
                <div class="lbdb-yzm code-btn" onclick="getCode('resetPwd', 'mobile', 'captcha', 'code-btn')">获取验证码</div>
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login3.png"/>
                </div>
                <input type="password" placeholder="请输入新密码" class="lbdb-input new_password">
                <div class="divclear"></div>
            </div>
            <div class="lbd-bd">
                <div class="lbdb-icon">
                    <img src="__STATIC__/index/images/icon_login3.png"/>
                </div>
                <input type="password" placeholder="请重复输入新密码" class="lbdb-input again_password">
                <div class="divclear"></div>
            </div>
            <button class="lbd-btn" id="reset_submit">确认</button>
            <div class="lbd-zc" onclick="formCtr(1)">返回 ></div>
            <div class="divclear"></div>
        </div>

        {include file="public:footer" /}
    </div>
</div>
</body>

<script src="__STATIC__/jquery/jquery-3.1.1.min.js"></script>
<script src="__STATIC__/layer/layer.js"></script>
<script>
    var is_login = `{$is_login}`
    if (is_login) {
        window.location.href = `{:url('index')}`;
    } else {
        formCtr();
    }

    /**
     * 表单控制
     * @param type  1：登录，2：注册，3：重置密码
     * */
    function formCtr(type = 1) {
        switch (type) {
            case 1:
                $('#login').show();
                $('#register').hide().find('input').val('');
                $('#resetPwd').hide().find('input').val('');
                break;
            case 2:
                $('#login').hide().find('input').val('');
                $('#register').show();
                $('#resetPwd').hide().find('input').val('');
                break;
            case 3:
                $('#login').hide().find('input').val('');
                $('#register').hide().find('input').val('');
                $('#resetPwd').show();
                break;
        }
    }

    // 登录
    $('#login_submit').click(function () {
        var mobile = $('#login .mobile').val();
        var password = $('#login .password').val();

        var url = `{:url('confirmLogin')}`;
        $.post(url, {mobile, password}, res => {
            layer.msg(res.msg);
            if (res.result == 1) {
                setTimeout(function () {
                    window.location.href = `{:url('index')}`;
                }, 500)
            }
        }, 'JSON')
    })

    // 刷新图形验证码
    function refreshCaptcha(formId) {
        $('#'+ formId +' .captcha_img').attr('src', '{:captcha_src()}');
    }

    var times = 60;
    var isSendSms = false;

    // 获取验证码
    function getCode(formId, mobileClass, captchaClass, codeBtnClass) {
        if (!isSendSms) {
            isSendSms = true;
            var mobile = $('#' + formId + ' .' + mobileClass).val();
            var captcha = $('#' + formId + ' .' + captchaClass).val();

            var url = `{:url('checkAndSendSms')}`;
            $.post(url, {mobile, captcha, type: formId}, res => {
                if (res.result == 1) {
                    var timer = setInterval(() => {
                        --times;
                        $('#' + formId + ' .' + codeBtnClass).html(times + 's');
                        if (times == 0) {
                            times = 60;
                            $('#' + formId + ' .' + codeBtnClass).html('获取验证码');
                            isSendSms = false;
                            clearInterval(timer);
                        }
                    }, 1000)
                } else {
                    refreshCaptcha(formId);

                    isSendSms = false;
                    layer.msg(res.msg);
                }
            }, 'JSON')
        }
    }

    // 注册
    $('#register_submit').click(function (){
        var mobile = $('#register .mobile').val();
        var code = $('#register .code').val();
        var password = $('#register .password').val();
        var again_password = $('#register .again_password').val();

        var url = `{:url('register')}`;
        $.post(url, {mobile, code, password, again_password}, res => {
            layer.msg(res.msg);
            if (res.result == 1) {
                setTimeout(function () {
                    formCtr();
                }, 500)
            }
        }, 'JSON')
    })

    // 重置密码
    $('#reset_submit').click(function () {
        var mobile = $('#resetPwd .mobile').val();
        var code = $('#resetPwd .code').val();
        var new_password = $('#resetPwd .new_password').val();
        var again_password = $('#resetPwd .again_password').val();

        var url = `{:url('resetPassword')}`;
        $.post(url, {mobile, code, new_password, again_password}, res => {
            layer.msg(res.msg);
            if(res.result == 1){
                setTimeout(function (){
                    formCtr();
                }, 500)
            }
        }, 'JSON')
    })
</script>

</html>



